<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>05 图片切换</title>
	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
		}
		#box{
			border: 1px solid #ccc;
			width: 430px;
			height: 70px;
			padding-top: 430px;
			background: url('images/big_pic1.jpg') no-repeat;
		}
		#box ul li{
			display: inline-block;
			margin-right: 15px;
		}
	</style>
</head>
<body>
	<div id="box">
		<ul>
			<li id="item1">
				<img src="images/pic1.jpg">
			</li>
			<li id="item2">
				<img src="images/pic2.jpg">
			</li>
			<li id="item3">
				<img src="images/pic3.jpg">
			</li>
			<li id="item4">
				<img src="images/pic4.jpg">
			</li>
			<li id="item5">
				<img src="images/pic5.jpg">
			</li>
		</ul>
	</div>
	<script type="text/javascript">
		// 初学者 小白 书写的方式
		// 1.获取事件源
		/*
		var item1 = document.getElementById('item1');
		var item2 = document.getElementById('item2');
		var item3 = document.getElementById('item3');
		var item4 = document.getElementById('item4');
		var item5 = document.getElementById('item5');
		var oBox = document.getElementById('box');
		*/
		// 1.获取事件源
		function $(id){
			return typeof id === 'string' ? document.getElementById(id) : null;
		}

		function changebgcImg(liId,imgSrc){
			// 2.添加事件
			$(liId).onmouseover = function(){
				// 3.改变背景图
				$('box').style.background = imgSrc;
			}
		}
		changebgcImg('item1',`url('images/big_pic1.jpg') no-repeat`);
		changebgcImg('item2',`url('images/big_pic2.jpg') no-repeat`);
		changebgcImg('item3',`url('images/big_pic3.jpg') no-repeat`);
		changebgcImg('item4',`url('images/big_pic4.jpg') no-repeat`);
		changebgcImg('item5',`url('images/big_pic5.jpg') no-repeat`);


		/*
		$('item1').onmouseover = function(){
			oBox.style.background = `url('images/big_pic1.jpg') no-repeat`
		}
		$('item2').onmouseover = function(){
			oBox.style.background = `url('images/big_pic2.jpg') no-repeat`
		}
		$('item3').onmouseover = function(){
			oBox.style.background = `url('images/big_pic3.jpg') no-repeat`
		}
		$('item4').onmouseover = function(){
			oBox.style.background = `url('images/big_pic4.jpg') no-repeat`
		}
		$('item5').onmouseover = function(){
			oBox.style.background = `url('images/big_pic5.jpg') no-repeat`
		}
		*/


	</script>
	
</body>
</html>